<template>
	<div class="tuiguangtu" style="position: absolute; left: -1000px; top: 0;">

    <div id="myElement" ref="myElement" style="position: relative;" >
      <img src="../../../static/img/fenxiang.png" style="width: 7.5rem;" v-if="search.competition_id != 24">
      <img src="../../../static/img/fenxiang2.png" style="width: 7.5rem;" v-if="search.competition_id == 24">
      <div style="position: absolute;  bottom: 1.3rem; left: 2.9rem; font-size: 16px; width: 1.8rem; height: 1.8rem;; padding: 0.1rem; background: #fff; border-radius: 0.1rem;">
        <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto; max-width: 100%; max-width: 100%;"></div>
      </div>
    </div>

	</div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import html2canvas from 'html2canvas';
	export default {
		name: 'tuiguangtu',
    props:['competition_id','inv_user_id'],
		data() {
			return {
        search:{
          competition_id:"",
          inv_user_id:"",
        },
        imgurl:"",
			}
		},
    beforeDestroy() {

    },
		created() {
      // this.getlist()

      this.search.competition_id = this.competition_id
      this.search.inv_user_id = this.inv_user_id

      console.log(this.search)
		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;





		},
		methods: {

      dataURLtoBlob(dataurl) {
          var arr = dataurl.split(","),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n)
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
          }
          return new Blob([u8arr], { type: mime })
      },

      shengcheng:function(){

        this.$refs.qrCodeUrl.innerHTML = '';

        let url = location.origin + '/h5/bisai/detail?id='+this.search.competition_id+'&inv_user_id='+this.search.inv_user_id
        console.log(url)
        const textToCopy = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9e4d5f151960619&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";

        axios.post(this.IP_URL+'/api/competition/shortchain',{url:textToCopy}).then((response)=>{
        	if (response.data.msg.code == 0) {

            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: response.data.data.shorturl,
                width: document.documentElement.clientWidth / 7.5 * 1.6,
                height: document.documentElement.clientWidth / 7.5 * 1.6,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })


            const element = this.$refs.myElement;
            html2canvas(element,{
              scale: 3, // 增加缩放比例
            }).then(canvas => {
              const dataUrl = canvas.toDataURL();
              console.log(dataUrl)
              let file = this.dataURLtoFile(dataUrl,'推广图'+ parseInt(Math.random()*100000) + '.png')
              this.uploadok(file)
            });


        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })


      },

      uploadok:function(file){

        let data = new FormData()
        data.append('file',file)
        axios.post(this.IP_URL+'/index/upload',data).then((response)=>{
          if(response.data.msg.code == 0){
            // this.imgurl = response.data.data.url
            // location.href = this.imgurl

            this.$emit('shengchengwan',response.data.data.url)
          } else {
            this.$message.error(response.data.reason);
          }
        })

      },

      dataURLtoFile:function(dataurl, filename) {
      	let arr = dataurl.split(',');
      	let mime = arr[0].match(/:(.*?);/)[1];
      	let bstr = atob(arr[1]);
      	let n = bstr.length;
      	let u8arr = new Uint8Array(n);
      	while (n--) {
      		u8arr[n] = bstr.charCodeAt(n);
      	}
      	return new File([u8arr], filename, {
      		type: mime
      	});
      },

    }
	}
</script>


<style scoped >
  .qrcode img{ max-width: 100%; max-height: 100%;}
  /deep/ .el-input__inner{}
  /deep/ .el-dialog__header{ padding: 0;}
  /deep/ .van-cell{ padding: 10px 0;}
</style>
